<template>
	<view class="count poRel">
		<!-- <view class="bf mb20 f-c maint">
			<view class="timg bsf">
				<mg-img :src="user.portrait"></mg-img>
			</view>
		</view> -->
		<view class="wid100 poAbs"
			style="height: 775rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poRel" style="z-index: 2;">
			<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
				<!-- 状态栏高度 -->
				<view :style="{ height: `${statusBarHeight}px` }"></view>
				<!-- 自定义导航栏高度 并 居中 -->
				<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
					<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
						<image src="../../../static/fanhui.png" class="wh100"></image>
					</view>
					<view class="foSi35" style="line-height: 36rpx;">设置</view>
				</view>
			</view>
			<view :style="{ height: `${statusBarHeight+barHeight+20}px` }"></view>
			<view class="wid90 mar borRad20 bacFFF"
				style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);padding: 10rpx 0;">
				<view class="wid90 mar">
					<view class="dis disAl disJuB hei86" style="border-bottom: 1rpx dashed #E5E5E5;">
						<view class="foSi30 fowe600">店铺logo</view>
						<view style="width: 70rpx;height: 70rpx;" @click="shangImage">
							<image :src="params.portrait" class="wh100 borRad50"></image>
						</view>
					</view>
					<view class="dis disAl disJuB hei86" style="border-bottom: 1rpx dashed #E5E5E5;">
						<view class="foSi30 fowe600">店铺名称</view>
						<input class="foSi30" style="text-align: right;" v-model="params.userName"
							placeholder="请输入门店名称" />
					</view>
					<view class="dis disAl disJuB hei86" style="border-bottom: 1rpx dashed #E5E5E5;">
						<view class="foSi30 fowe600">性别</view>
						<picker class="foSi25" @change="sexChange" :value="sexIndex" :range-key="'name'"
							:range="sexArr">
							<view class="dis disAl">
								<view class="mar-right10">{{params.sex}}</view>
								<uni-icons type="right" size="25rpx"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="dis disAl disJuB hei86" style="border-bottom: 1rpx dashed #E5E5E5;">
						<view class="foSi30 fowe600">手机号</view>
						<input class="foSi30" style="text-align: right;" v-model="params.userTel" placeholder="请输入手机号" />
					</view>
					<view class="dis disAl disJuB hei86" @click="go({t:1,url:'/yb_wm/my/address/index'})">
						<view class="foSi30 fowe600">我的地址</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view>
					<!-- <view class="dis disAl disJuB hei86">
						<view class="foSi30 fowe600">账户与安全</view>
						<uni-icons type="right" size="25rpx"></uni-icons>
					</view> -->
				</view>
				<!-- <mg-input isr='1' v-model="user.userName" ht='昵称' dis="1"></mg-input>
			<mg-input isr='1' v-model="user.id" ht='用户ID' dis="1"></mg-input>
			<mg-input isr='1' v-model="params.realName" ht='真实姓名' pr='请输入姓名'></mg-input>
			<mg-input isr='1' v-model="params.userTel" :max='11' t='number' ht='电话' pr='请输入手机号' -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- <sq-btn slot='ft' @refresh='setTel' type="2" cname="text-btnf f24 ml20 p0" :sname="{background:tColor}" w='120' h='50'
				 t='自动填写'></sq-btn> -->
				<!-- #endif -->
				<!-- </mg-input> -->
				<!-- <mg-cell isr='1' cname='p03' ht='性别' htc="f30">
				<view slot='bd'>
					<mg-radio v-model="params.sex" :arr='sexArr' :color="tColor"></mg-radio>
				</view>
			</mg-cell> -->
				<!-- <mg-cell v-if='!isbj' last="1" isr='1' ht='生日' htc="f30">
				<picker slot='bd' mode="date" :value="date" :end="endDate" @change="bindDateChange">
					<view class="f30" :class="params.birthday?'':'c9'">{{params.birthday||'生日当天有优惠'}}</view>
				</picker>
			</mg-cell>
			<mg-cell v-else last="1" isr='1' ht='生日' htc="f30" :btt="params.birthday" bttc="c9"></mg-cell> -->
			</view>
			<!-- <view class="textCen mar-top30 foSi28" @click="save" style="color: #737373;">保存</view> -->
		</view>
		<view class="wid100 poFix" style="bottom: 50rpx;">
			<view class="wid90 mar dis disAl disJuC borRad60 foSi35 coFFF" @click="save"
				:style="{background:tColor}" style="height: 94rpx;">保存</view>
		</view>
		<!-- <view class="foot-btnc posi-r">
			<button @click="save" :loading="loading" :disabled="loading" class="foot-btn bs5 f32 f-c"
				:style="{background:tColor}" hover-class="btnhc">保存</button>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import mgInput from '@/components/form/mg-input.vue'
	import MgCell from '@/components/common/mg-cell.vue'
	import mgRadio from '@/components/form/mg-radio.vue'
	import bkB from '@/components/common/block-b.vue'
	import sqBtn from '@/components/common/sq-btn.vue'
	import utils from '@/common/utils.js'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	export default {
		components: {
			mgInput,
			mgRadio,
			MgCell,
			bkB,
			sqBtn,
		},
		data() {
			return {
				statusBarHeight: 0,
				barHeight: 0,
				t: 'digit',
				params: {
					userId: '',
					userTel: '',
					// birthday: '',
					sex: '男',
					userName: '',
					portrait: ''
				},
				sexIndex: 0,
				sexArr: [{
						value: '男',
						name: '男'
					},
					{
						value: '女',
						name: '女',
						checked: 'true'
					}
				],
				loading: false,
				isEdit: false,
				date: '',
				endDate: '',
				isbj: false,
			}
		},
		async onLoad(options) {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.util.setNT('编辑资料')
			this.getSystem()
			this.date = this.endDate = this.timeToDate(this.dateToTime(), 'yyyy-MM-dd')
			this.getLoginInfo().then(() => {
				this.params.userId = this.uId
				this.params.userTel = this.user.userTel || ''
				this.params.portrait = this.user.portrait
				this.params.userName = this.user.userName
				if (this.user.sex != null) {
					this.isbj = true //生日只保存一次
					// this.params.userName = this.user.userName
					this.params.sex = this.user.sex
					// this.params.birthday = this.user.birthday
				}
			})
		},
		mixins: [utilMixins],
		computed: {},
		methods: {
			//上传图片
			shangImage(){
				var that = this
				uni.chooseImage({
					count: 1,
					success:(res)=>{
						// that.imageList = that.imageList.concat(res.tempFilePaths);
						// for (var i=0; i<res.tempFilePaths.length; i++) {
						// 	that.shangchuan(res.tempFilePaths[i])
						// }
						that.params.portrait = res.tempFilePaths[0];
						// that.shangchuan(res.tempFilePaths[0])
					},
				})
			},
			shangchuan(tempFilePaths){
				var that = this
				uni.uploadFile({
					url: that.util.url('api/common/upload'),
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							that.params.portrait = apiresult.data.url;
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon:'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:'error',
							duration: 2000
						})
					}
				});
			},
			sexChange: function(e) {
				this.sexIndex = e.detail.value
				this.params.sex = this.sexArr[this.sexIndex].value
			},
			setTel(e) {
				this.params.userTel = e
			},
			bindDateChange(e) {
				this.params.birthday = e.target.value
			},
			tuichu(){},
			async save() {
				// this.params.birthday = this.dateToTime(this.date)
				// ['realName']
				let filterArr = []
				let judgeData = utils.isFailParams({
					field: this.params,
					filter: filterArr,
					tips: {
						userId: '缺少用户id',
						userName: '请输入门店名称',
						userTel: '请输入手机号',
						birthday: '请选择生日',
					}
				})
				if (!judgeData) {
					return
				} else {
					if (!utils.isTelCode(this.params.userTel)) return this.util.message('请输入正确的手机号', 3)
					// console.log(this.params)
					// return
					this.loading = true
					// await this.requestSM('vip')
					let res = await this.util.request({
						'url': this.api.xgyh,
						method: 'POST',
						mask: 1,
						data: this.params,
					})
					if (!res) {
						this.loading = false
					} else {
						this.util.message('提交成功', 1, 1000)
						utils.swnb(1000)
					}
				}
			},
			fanhui(){
				uni.navigateBack(1)
			},
		}
	}
</script>

<style scoped lang="scss">
	.count{
		min-height: 100vh;
		background-color: #F6F6F6;
	}
	.maint {
		padding: 50rpx 0;
	}

	.timg {
		width: 220rpx;
		height: 220rpx;
	}

	.foot-btnc {
		padding: 40rpx;
	}

	.foot-btn {
		height: 102rpx;
	}
</style>